<template>
	<view class="container">
		<view class="position-relative">
			<image src="/static/images/mine/mine_bg.png" class="bg"></image>
			<button type="default" size="mini" class="hym-btn" @tap="memberCode">
				<image src="/static/images/home/qrcode.png"></image>
				<text>会员码</text>
			</button>
		</view>

		<view style="padding: 0 30rpx;">
			<!-- user box begin -->
			<view class="d-flex flex-column bg-white user-box">
				<view class="d-flex align-items-center">
					<view class="avatar">
						<image :src="isLogin ? member.avatar : '/static/images/mine/default.png'"></image>
						<view class="badge" v-if="isLogin">
							<image src="/static/images/mine/level.png"></image>
							<view>{{ member.memberLevel }}</view>
						</view>
					</view>
					<view class="d-flex flex-column flex-fill overflow-hidden" style="margin-top: 20rpx;">
						<view v-if="isLogin"
							class="font-size-lg font-weight-bold d-flex justify-content-start align-items-center"
							@tap="userinfo">
							<view class="text-truncate">{{ member.nickname }}</view>
							<view class="iconfont iconarrow-right line-height-100"></view>
						</view>
						<view v-else class="font-size-lg font-weight-bold" @tap="login">请点击授权登录</view>
						<view class="font-size-sm text-color-assist">
							当前成长值{{ isLogin ? 0 : 0 }}/{{ isLogin ? 0 : 0 }}
						</view>
						<view class="w-100">
							<progress percent="0" activeColor="#ADB838" height="8rpx" :percent="growthValue"
								border-radius="8rpx" />
						</view>
					</view>
					<view
						class="level-benefit d-flex flex-shrink-0 align-items-center justify-content-end text-color-white bg-warning font-size-sm">
						<view>会员权益</view>
						<view class="iconfont iconarrow-right line-height-100"></view>
					</view>
				</view>
				<!-- user grid begin -->
				<u-grid :border="false" col="2" @click="clickMenu">
					<u-grid-item>
						<u--text color="#5A5B5C" size="20" bold :text="isLogin ? member.couponNum : '***'"
							align="center"></u--text>
						<u--text color="#919293" class="grid-text" text="优惠券" size="14" align="center"></u--text>
					</u-grid-item>
					<!-- <u-grid-item>
						<u--text color="#5A5B5C" size="20" bold :text="'***'" align="center"></u--text>
						<u--text color="#919293" class="grid-text" text="积分商城" size="14" align="center"></u--text>
					</u-grid-item> -->
					<!-- <u-grid-item>
						<u--text color="#5A5B5C" size="20" bold :text="'***'" align="center"></u--text>
						<u--text color="#919293" class="grid-text" text="余额" size="14" align="center"></u--text>
					</u-grid-item> -->
					<u-grid-item>
						<u--text color="#5A5B5C" size="20" bold :text="'***'" align="center"></u--text>
						<u--text color="#919293" class="grid-text" text="我的积分" size="14" align="center"></u--text>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- user box end -->
			<!-- level benefit box begin -->
			<view class="level-benefit-box" v-if="!isLogin">
				<view class="d-flex align-items-center justify-content-between font-size-base">
					<view class="text-color-base" style="font-size: 34rpx;">新用户加入会员，享会员权益</view>
					<view class="text-color-primary" style="color: rgb(250, 180, 65);" @tap="login">立即加入</view>
				</view>

				<u-grid :border="false" @click="click" col="4">
					<u-grid-item>
						<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" name="gift" :size="30" color="#f9ae3d"></u-icon>
						<u--text class="grid-text" color="#919293" size="14" text="入会有礼" align="center"></u--text>

					</u-grid-item>
					<u-grid-item>
						<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" name="integral" :size="30"
							color="#f9ae3d"></u-icon>
						<u--text class="grid-text" color="#919293" size="14" text="积分兑换" align="center"></u--text>

					</u-grid-item>
					<u-grid-item>
						<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" name="heart" :size="30" color="#f9ae3d"></u-icon>
						<u--text class="grid-text" color="#919293" size="14" text="升级特权" align="center"></u--text>

					</u-grid-item>
					<u-grid-item>
						<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" name="bag" :size="30" color="#f9ae3d"></u-icon>
						<u--text class="grid-text" color="#919293" size="14" text="生日特权" align="center"></u--text>

					</u-grid-item>
				</u-grid>

			</view>
			<!-- level benefit box end -->
			<!-- banner begin -->
			<view class="banner-box">
				<u--image src="../../static/images//mine/banner.png"
					height="200rpx" width="700rpx" mode="widthFix" />
			</view>
			<!-- bennaer end -->
		</view>
		<!-- service box begin -->
		<view class="service-box">
			<view class="font-size-lg text-color-base font-weight-bold" style="margin-bottom: 20rpx;">我的服务</view>
			<u-grid :border="false" @click="clickServiceMenu" col="4">
				<u-grid-item v-for="item in servieMenuList">
					<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="item.icon" :size="30" color="#f9ae3d"></u-icon>
					<u--text class="grid-text" color="#919293" size="14" :text="item.name" align="center"></u--text>
				</u-grid-item>
				<!-- <u-grid-item>
					<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" name="gift" :size="30" color="#f9ae3d"></u-icon>
					<u--text color="#919293" class="grid-text" size="14" text="积分商城" align="center"></u--text>
				</u-grid-item>
				<u-grid-item>
					<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" name="kefu-ermai" :size="30" color="#f9ae3d"></u-icon>
					<u--text class="grid-text" color="#919293" size="14" text="联系客服" align="center"></u--text>
				</u-grid-item>
				<u-grid-item>
					<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" name="file-text" :size="30" color="#f9ae3d"></u-icon>
					<u--text class="grid-text" color="#919293" size="14" text="我的订单" align="center"></u--text>
				</u-grid-item> -->
				<!-- <u-grid-item>
					<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" name="account" :size="30" color="#f9ae3d"></u-icon>
					<u--text class="grid-text" size="14" color="#919293" text="我的资料" align="center"></u--text>
				</u-grid-item>
				<u-grid-item>
					<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" name="map" :size="30" color="#f9ae3d"></u-icon>
					<u--text class="grid-text" size="14" color="#919293" text="收货地址" align="center"></u--text>
				</u-grid-item>
				<u-grid-item>
					<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" name="more-dot-fill" :size="30"
						color="#f9ae3d"></u-icon>
					<u--text class="grid-text" color="#919293" size="14" text="更多服务" align="center"></u--text>
				</u-grid-item> -->
			</u-grid>

		</view>
		<!-- service box end -->
		<!-- tips begin -->
		<view class="d-flex just-content-center align-items-center text-color-assist"
			style="padding: 30rpx 0; font-size: 22rpx;">
			会员卡适用于某奶茶店指定范围
		</view>
		<!-- tisps end -->
	</view>
</template>

<script setup lang="ts">
import { mapState, mapGetters } from 'vuex'
import { reactive } from 'vue';
const member = reactive({ memberLevel: '', nickname: '' }); 
const servieMenuList = reactive([{
	name: '积分签到',
	icon: "calendar",
	path:"/pages/attendance/attendance"
},
	{
	name: '积分商城',
	icon: "gift",
	path:"/pages/integrals/integrals"
	},
	{
	name: '联系客服',
	icon: "kefu-ermai",
	path:""
},{
	name: '我的订单',
	icon: "file-text",
	path:"/pages/order/index"
},{
	name: '我的资料',
	icon: "account",
	path:"/pages/mine/userinfo"
},{
	name: '收货地址',
	icon: "map",
	path:"/pages/address/index"
},{
	name: '更多服务',
	icon: "more-dot-fill",
	path:"/pages/services/services"
}]

); 
const login = () => { uni.navigateTo({
		url:'/pages/login/index'
})
}
const clickMenu = (index: Number) => { 
let path =''
	switch (index) {
		case 0:
		path='/pages/coupon/index'
			break;
			case 1:path='/pages/integrals/integrals'
			break;case 2:
			break;	
			case 3:path='/pages/coupon/index'
			break;
	}

	uni.navigateTo({
		url:path
	})
}
const clickServiceMenu = (index: Number) => { 
	if (index == 3) { 
		uni.switchTab({
		url:servieMenuList[index].path
	})
		return
	}
	
	uni.navigateTo({
		url:servieMenuList[index].path
	})
} 
</script>

<style lang="scss" scoped>
page {
	height: auto;
	min-height: 100%;
}

.bg {
	width: 100%;
	height: calc(410 / 594 * 750rpx);
}

.hym-btn {
	position: absolute;
	top: 40rpx;
	right: 40rpx;
	//color: $color-primary;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50rem;
	//font-size: $font-size-sm;
	box-shadow: 0 0 20rpx rgba(66, 66, 66, 0.1);

	&::after {
		border: 0;
	}

	image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
}

.user-box {
	position: relative;
	border-radius: 8rpx;
	margin-bottom: 30rpx;
	margin-top: -115rpx;
	padding: 0 0 30rpx 0;
	box-shadow: 0 16rpx 16rpx -16rpx rgba(51, 51, 51, 0.1);
}

.avatar {
	position: relative;
	margin-top: -35rpx;
	margin-left: 35rpx;
	margin-right: 35rpx;
	width: 160rpx;
	height: 160rpx;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #FFFFFF;
	box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.2);

	image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 100%;
	}

	.badge {
		position: absolute;
		right: -10rpx;
		bottom: -10rpx;
		background-color: #FFFFFF;
		border-radius: 50rem;
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgb(249, 174, 61);
		font-size: 24rpx;
		padding: 8rpx 16rpx;
		box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.2);

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}
}

.level-benefit {
	margin-left: 35rpx;
	padding: 10rpx 0 10rpx 30rpx;
	border-radius: 50rem 0 0 50rem;
}

.user-grid {
	width: 25%;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.value {
		margin-bottom: 20rpx;
	}
}

.level-benefit-box {
	border-radius: 8rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 8rpx 6rpx rgba(135, 136, 137, 0.1);
	width: 100%;
	display: flex;
	padding: 30rpx;
	flex-direction: column;
	background-color: #FFFFFF;


}

.banner-box {
	width: 100%;
	border-radius: 8rpx;
	margin-bottom: 30rpx;
	height: 200rpx;
	overflow: hidden;
}

.service-box {
	width: 100%;
	background-color: #FFFFFF;
	padding: 32rpx 30rpx 10rpx;
	box-shadow: 0 16rpx 16rpx -16rpx rgba(51, 51, 51, 0.1);
}
</style>
